/*
 *
 * (c) Copyright Ascensio System Limited 2010-2018
 *
 * This program is freeware. You can redistribute it and/or modify it under the terms of the GNU 
 * General Public License (GPL) version 3 as published by the Free Software Foundation (https://www.gnu.org/copyleft/gpl.html). 
 * In accordance with Section 7(a) of the GNU GPL its Section 15 shall be amended to the effect that 
 * Ascensio System SIA expressly excludes the warranty of non-infringement of any third-party rights.
 *
 * THIS PROGRAM IS DISTRIBUTED WITHOUT ANY WARRANTY; WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR
 * FITNESS FOR A PARTICULAR PURPOSE. For more details, see GNU GPL at https://www.gnu.org/copyleft/gpl.html
 *
 * You can contact Ascensio System SIA by email at sales@onlyoffice.com
 *
 * The interactive user interfaces in modified source and object code versions of ONLYOFFICE must display 
 * Appropriate Legal Notices, as required under Section 5 of the GNU GPL version 3.
 *
 * Pursuant to Section 7 § 3(b) of the GNU GPL you must retain the original ONLYOFFICE logo which contains 
 * relevant author attributions when distributing the software. If the display of the logo in its graphic 
 * form is not reasonably feasible for technical reasons, you must include the words "Powered by ONLYOFFICE" 
 * in every copy of the program you distribute. 
 * Pursuant to Section 7 § 3(e) we decline to grant you any rights under trademark law for use of our trademarks.
 *
*/


html
{
    height: 100%;
    width: 100%;
}

.h_line {
    background-color: #D1D1D1;
    height: 1px;
    line-height: 1px;
    margin-bottom: 20px;
    margin-top: 20px;
}
/*******************************************************************************
   css inline style
*******************************************************************************/
.clear {
    border: 0 !important;
    display: block !important;
    clear: both !important;
    height: 1px !important;
    line-height: 1px !important;
    margin: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    width: 100% !important;
}

.display-none {
    display: none;
}
.visibility-hidden {
    visibility: hidden;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}
.user-select-none {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    MozUserSelect: none;
}
.text-overflow {
    .textOverflowEllipsis();
}
.border-style {
    border:1px solid @borderColor;
}

/*******************************************************************************
   base markup
*******************************************************************************/
body {
    background-color: #fff;
    color: #333333;
    font: normal 12px @baseFont;
    height: 100%;
    margin: 0px;
    padding: 0px;
    text-decoration: none;
}
body.desktop {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    MozUserSelect: none;
}
pre {
    color: #333333;
    font-family: @baseFont;
    font-size: 12px;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
}
div {
    margin: 0px;
    padding: 0px;
}
input,textarea, select {
    font-family: @baseFont;
}
.ui-datepicker {
    font-family: @baseFont !important;
}
/*******************************************************************************
  content layer
*******************************************************************************/
.main-content {
    height: 100%;
}
#studioPageContent {
    min-height: 100%;
    position: relative;
    min-width: 1024px;
}
.mainPageLayout {
    margin: 0px auto;
    min-width: 959px;
    padding: 24px 24px 0;
    position: static;
    text-align: left;
    width: auto;
    height: auto;
    overflow: hidden;
}

.mainPageTable {
    float: none;
    width: 100%;
    height: 100%;
	min-height:350px;
    overflow: auto;

    .mainPageTableSidePanel {
        border-bottom: medium none;
        border-left: medium none;
        border-top: medium none;
        overflow: hidden;
        .textOverflowEllipsis();
        min-width: 240px;
        width: 240px;
        padding-bottom: 24px;
        padding-right: 24px;
        vertical-align: top;

        &.ui-resizable {
            overflow: visible;

            .ui-resizable-handle.ui-resizable-e {
                cursor: col-resize;
            }
        }
    }

    .mainPageContent {
        padding-bottom: 24px;
        vertical-align: top;
    }

    &.with-mainPageTableSidePanel .mainPageContent {
        padding-left: 24px;

        &.calendar{
            padding-left: 0;
            padding-bottom: 0;
        }
    }
}

#studio_sidePanel {
    overflow: hidden;
    .textOverflowEllipsis();
    width: 240px;
}
.sidepanel-with-chat {
    margin-bottom: 30px;
}
.mainContainer {
    overflow: hidden;
}


/*******************************************************************************
    calendar
*******************************************************************************/

.ui-icon.ui-icon-circle-triangle-e { 
    background-position: -32px 0; 
}
.ui-icon.ui-icon-circle-triangle-w {
    background-position: -96px 0; 
}

.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all {
    background-color: transparent;
    border: none;

    .ui-datepicker-next.ui-corner-all.ui-state-hover, .ui-datepicker-prev.ui-corner-all.ui-state-hover {
        border-color:#ddd !important;
        background-color:#ddd !important;
    }
}
.ui-widget-header .ui-corner-all.ui-state-hover {
    border-color:#ddd;
    background-color:#ddd;
}
.ui-datepicker-title {
    .ui-datepicker-month, .ui-datepicker-year {
        border-bottom: 1px dotted black;
        cursor: pointer;
        padding-bottom: 0.1em;
    }
}
.asc-datepicker .ui-datepicker .ui-datepicker-calendar td, .ui-datepicker .ui-datepicker-calendar td {
    padding: 1px 1px 1px 3px;
}


.ui-datepicker.ui-corner-all {
    width: 20em;
}

.ui-datepicker.ui-corner-all th {
    font-weight: normal;
}

.ui-datepicker a.ui-state-default {
    border: 1px solid #ffffff;
    background: #fff;
    font-weight: normal;
    color: #555555;
    text-align: center;
    border-radius: 3px;
    width: 16px;
    height: 13px;
    line-height: 13px;
}

.ui-datepicker-prev-hover.ui-corner-all {
    border-color:#ddd !important;
    background:#ddd !important;
}

.ui-datepicker-calendar a.ui-state-default {
    &.ui-state-hover {
        border: 1px solid #ddd !important;
        background: #ddd !important;
        font-weight: normal;
        color: #555555 !important;
    }
}

.ui-datepicker a.ui-state-default {
    &.ui-state-hover, &.ui-state-active, &.ui-state-highlight.ui-state-active, &.ui-state-highlight.ui-state-hover {
        border: 1px solid #ddd !important;
        background: #ddd !important;
        font-weight: normal;
        color: #555555 !important;
    }
}

.ui-datepicker a.ui-state-default {
    &.ui-state-highlight {
        border: 1px solid #fefde9 !important;
        background: #fefde9 !important;
        font-weight: normal;
        color: #555555 !important;
    }
}

.asc-datepicker {
    .ui-datepicker-inline.ui-datepicker {

        &.ui-datepicker.ui-widget.ui-widget-content {
            width: 20em;
        }

        .ui-widget-header .ui-corner-all.ui-state-hover {
            border-color: #ddd;
            background: #ddd;
        }

        .ui-datepicker-title .ui-datepicker-month, .ui-datepicker-title .ui-datepicker-year {
            font-size: 12px;
        }

        .ui-icon.ui-icon-circle-triangle-w {
            background-position: -96px 0;
        }

        .ui-icon.ui-icon-circle-triangle-e {
            background-position: -32px 0;
        }

        .ui-datepicker-calendar th span {
            text-transform: none;
            font-size: 11px;
            font-weight: normal;
        }

        .ui-datepicker-calendar .ui-state-disabled span.ui-state-default {
            border-radius: 3px;
            width: 16px;
            height: 13px;
            line-height: 13px;
            text-align: center;
        }

        .ui-datepicker-calendar td a {
            text-align: center;
            font-size: 11px;
        }
    }
}

/*******************************************************************************
    clearfix
*******************************************************************************/
.clearFix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/* MSIE6- */
* html .clearFix {
    height: 1%;
}

/* MSIE7- */
.clearFix {
    zoom: 1;
    display: block;
}

.textEdit {
    border: solid 1px #c7c7c7;
    font-size: 12px;
    height: 16px;
    .borderRadius(0);

    &.with-error {
        border-color: #cc3300;
    }
}

.pwdLoginTextbox {
    .borderRadius(3px);

    background-color: #ffffff;
    border: solid 1px #c7c7c7;
    color: #434341;
    font-size: 18px;
    padding: 8px 20px;
    width: 358px;
}

textarea {
    border: 1px solid #c7c7c7;
    font-size: 12px;
}

.comboBox {
    border: solid 1px #c7c7c7;
}
select.comboBox {
     height: 23px;
}

.comboBoxHiddenBorder {
    border-width: 0px;
    margin: 1px;
}
.comboBoxHiddenBorder:hover, .comboBoxHiddenBorderFocused {
    border: solid 1px #c7c7c7;
    margin: 0px;
}

:disabled,
input.disabled, 
textarea.disabled,
option.disabled,
/* fix ie8 */
input[disabled="disabled"] {
    background-color: #efefef;
    color: #666562;
}
input:focus {
    outline: none;
}
input[type="text"]:focus, textarea:focus {
    outline: none;
    border: solid 1px #3186af;
}
/* fix ie10 */
input[type="checkbox"][disabled="disabled"] {
    background-color: transparent;
}
/*******************************************************************************
    popup box with error message
*******************************************************************************/

.errorText {
    color: #cc3300;
}
.errorBox {
    background: #FFECE3 url('imagescss/alert_16.png') 10px 10px no-repeat;
    color: #666668 !important;
    font-size: 13px;
    font-weight: normal;
    margin: 5px 0px;
    padding: 10px 10px 10px 30px !important;
    vertical-align: middle;
}
.warnBox {
    background:#FBFAD5 url('imagescss/expl_16.png') 10px 10px no-repeat;
    color: #666668 !important;
    font-size: 13px;
    font-weight: normal;
    margin: 5px 0px;
    padding: 10px 10px 10px 30px;
    vertical-align: middle;
}
/*******************************************************************************
    Success popup box
*******************************************************************************/
.okText {
    color: #74af00;
}
.okBox {
    background-color: #E5EFD1;
    border: 1px solid #dddddd;
    color: #74af00;
    font-weight: bolder;
    padding: 8px 11px;
    margin: 5px 0px;
}
.operationInfoBox {
    background: #EEF6FD url('imagescss/info_16.gif') 10px 10px no-repeat;
    color: #666668 !important;
    font-size: 13px;
    font-weight: normal;
    padding: 7px 36px 10px;
    vertical-align: middle;
}


/*******************************************************************************
    Links
*******************************************************************************/

/*all links*/
a, a:visited, a:hover, a:active  {
    font-weight: normal;
    color: #116d9d;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}

/*header link as common header*/
a.linkHeader, a.linkHeader:visited, a.linkHeader:hover, a.linkHeader:active {
    color: #333333;
    font-size: 16px;
    font-weight: bolder;
    text-decoration: none;
}
a.linkHeader:hover {
    text-decoration: underline;
}
a.linkHeader:active {
    text-decoration: none;
}
/*medium link font-size 12*/
a.linkHeaderMedium, a.linkHeaderMedium:visited, a.linkHeaderMedium:active
{
    color: #333333;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}
a.linkMedium, a.linkMedium:visited, a.linkMedium:active
{
    color: #333333;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
}
a.linkHeaderMedium:hover, a.linkMedium:hover
{
    text-decoration: underline;
}

/*---------gray profile and so on links----*/
a.linkDescribe, a.linkDescribe:visited ,a.linkDescribe:active  {
    color: #646567;
    font-size: 11px;
    text-decoration: underline;
}
a.linkDescribe:hover {
    text-decoration: none;
}

a.linkText, a.linkText:visited,a.linkText:active {
    font-size: 12px;
    color: #333333;
    text-decoration: none;
}
a.linkText:hover {
    text-decoration: underline;
}

.userLink {
    padding: 0;
    display: inline-block;
    white-space:nowrap;
}

a.linkAction, a.linkAction:visited,a.linkAction:active  {
    color: #333;
    font-size: 12px !important;
    text-decoration: underline;
}
a.linkAction:hover {
    text-decoration: none;
}


/*-------------------------Backgrounds--------------------------*/

.tintLight {
    background-color: #ffffff;
}
.tintGray {
    background-color: #f0f0f0;
}
.tintMedium {
    background-color: #fff;
}
.tintDangerous {
    background-color: #fff6df;
}
.moveBackground {
    background-image: url('imagescss/move.png');
    background-repeat: repeat;
    cursor: move;
}
.moveHoverBackground {
    background-image: url('imagescss/move.gif');
    background-repeat: no-repeat;
    background-color: #edf6fd;
    background-position: center 2px;
    cursor: move;
}
.moveDarkBackground {
    background-image: url('imagescss/move2.png');
    background-repeat: repeat;
    cursor: move;
}


/*----------------Header Panels------------------------*/
.headerPanel-splitter {
    margin-bottom: 16px;
}
.headerPanelSmall-splitter {
    margin-bottom: 8px;
}

.block-cnt-splitter {
    margin-bottom: 20px;
}
.popupContainerClass .block-cnt-splitter {
    margin-bottom: 16px;
}

/*----------------Borders and Corners------------------*/
.borderBase
{
    border: solid 1px #d1d1d1;
}

.borderLight
{
    border: solid 1px #dbdfe2;
}


/*----------------loaders------------------*/
.loader-text-block {
    background: url("images/loader_32.gif") no-repeat scroll left center transparent;
    display:inline-block;
    color: @textColorGrayDark;
    font-size: 11px;    
    padding:10px 0 10px 40px;
    text-decoration:none;
}
.loading-link, .loading-link:hover{
    background: url("images/loader_16.gif") no-repeat scroll left center transparent;
    color: @textColorGrayDark;
    cursor: default;
    font-weight: bold;
    padding-left: 20px;
    text-decoration:none;
}
/*----------------Style Placeholder------------------*/
::-webkit-input-placeholder { /* WebKit browsers */
    color:   #b2b2b2;
    font-family: @baseFont;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:   #b2b2b2;
    font-family: @baseFont;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:   #b2b2b2;
    font-family: @baseFont;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:   #b2b2b2;
    font-family: @baseFont;
}

/*----------------Arrow------------------*/

.with-arrow-right {
    position: relative;

    &:after {
        .arrow-close(4px, #212121);
        left: 0;
        margin-top: -4px;
    }
}
.with-arrow-down {
    position: relative;

    &:after {
        .arrow-down(4px, #212121);
        left: 0;
        margin-top: -2px;
    }
}